<template>
  <div class="orderList">
    <TopBar title="我的订单" @leftClick="router.push('me')" />
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab :title="item.title" v-for="item in tabList" :key="item.id" />
    </van-tabs>
    <div class="bar">
      <List tag="all" v-if="active == 0" />
      <List tag="send" v-else-if="active == 1" />
      <List tag="receive" v-else-if="active == 2" />
      <List tag="complete" v-else />
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import TopBar from "@/components/topHeader/index.vue"
import List from "./list.vue"

const router = useRouter()
const route = useRoute()
const active = ref(0);
const tabList = ref([
  { id: 1, title: "全部" },
  { id: 2, title: "待发货" },
  { id: 3, title: "待收货" },
  { id: 4, title: "已完成" },
])

</script>
<style lang="less" scoped>
.orderList {
  padding-top: 45px;

  .bar {
    padding: 15px;
    overflow: auto;
    height: calc(100vh - 125px);

  }
}
</style>
